<script setup>
import { useRouter } from 'vue-router'

const router = useRouter();

const name = localStorage.getItem('adminname')

const handleCommand = (command) => {
    if(command === 'loginOut') {
        console.log('退出登录');
        localStorage.removeItem('adminname')
        localStorage.removeItem('token')
        router.push('/login')
    }else{
        console.log('修改密码');
        router.push('/changepass')
    }
}   

</script>

<template>
    <div class="boss">
        <div>
            <el-icon size="40px" style="color: white;">
                <ElementPlus />
            </el-icon>
        </div>
        <div class="span">
            <span>嗨购商城后台管理</span>
        </div>
        <div>
            <el-dropdown trigger="click" @command="handleCommand">
                <span>
                    你好：{{name}}
                    <el-icon><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
                        <el-dropdown-item command="change">修改密码</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<style scoped lang="scss">
.boss{
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-shadow:0 1px 5px; 
    position: relative;
    z-index: 1;

    & .span{
        font-size: 30px;
        color: white;
    }
}

</style>